import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism'; // 代码高亮样式

export const markdownComponents = {
  // 标题标签（h1-h6）
  h1: ({ children }) => (
    <h1 style={{
      margin: '1.5rem 0 1rem',
      color: '#1a202c',
      fontWeight: 700,
      fontSize: '2rem',
      borderBottom: '2px solid #e2e8f0',
      paddingBottom: '0.5rem'
    }}>
      {children}
    </h1>
  ),
  h2: ({ children }) => (
    <h2 style={{
      margin: '1.3rem 0 0.8rem',
      color: '#2d3748',
      fontWeight: 600,
      fontSize: '1.5rem',
      borderBottom: '1px solid #e2e8f0',
      paddingBottom: '0.3rem'
    }}>
      {children}
    </h2>
  ),
  h3: ({ children }) => (
    <h3 style={{
      margin: '1.2rem 0 0.7rem',
      color: '#4a5568',
      fontWeight: 600,
      fontSize: '1.25rem'
    }}>
      {children}
    </h3>
  ),
  h4: ({ children }) => (
    <h4 style={{
      margin: '1rem 0 0.5rem',
      color: '#4a5568',
      fontWeight: 500,
      fontSize: '1.1rem'
    }}>
      {children}
    </h4>
  ),
  h5: ({ children }) => (
    <h5 style={{
      margin: '0.8rem 0 0.4rem',
      color: '#4a5568',
      fontWeight: 500,
      fontSize: '1rem'
    }}>
      {children}
    </h5>
  ),
  h6: ({ children }) => (
    <h6 style={{
      margin: '0.8rem 0 0.4rem',
      color: '#718096',
      fontWeight: 500,
      fontSize: '0.9rem'
    }}>
      {children}
    </h6>
  ),

  // 段落标签
  p: ({ children }) => (
    <p style={{ 
      margin: '0.8rem 0', 
      lineHeight: 1.7, 
      color: '#2d3748',
      fontSize: '1rem'
    }}>
      {children}
    </p>
  ),

  // 链接标签
  a: ({ href, children }) => (
    <a 
      href={href} 
      target="_blank" 
      rel="noopener noreferrer"
      style={{ 
        color: '#3182ce', 
        textDecoration: 'none',
        borderBottom: '1px solid #3182ce',
        paddingBottom: '1px'
      }}
    >
      {children}
    </a>
  ),

  // 代码块标签（带语法高亮）
  code({ inline, className, children, ...props }) {
    const match = /language-(\w+)/.exec(className || '');
    
    // 内联代码
    if (inline) {
      return (
        <code 
          style={{ 
            backgroundColor: '#f7fafc', 
            padding: '0.2em 0.4em', 
            borderRadius: '3px',
            fontSize: '85%',
            border: '1px solid #e2e8f0',
            color: '#e53e3e',
            fontWeight: 500
          }} 
          {...props}
        >
          {children}
        </code>
      );
    }
    
    // 代码块
    return (
      <div style={{ margin: '1rem 0', borderRadius: '6px', overflow: 'hidden', boxShadow: '0 1px 3px rgba(0,0,0,0.1)' }}>
        <SyntaxHighlighter
          language={match ? match[1] : 'text'} // 默认为纯文本
          style={dracula} // 使用 dracula 主题
          showLineNumbers={true} // 显示行号
          lineNumberStyle={{ 
            padding: '0 1rem', 
            backgroundColor: '#282a36', 
            color: '#f8f8f2',
            minWidth: '40px',
            textAlign: 'right'
          }}
          customStyle={{
            margin: 0,
            borderRadius: '6px'
          }}
          {...props}
        >
          {String(children).replace(/\n$/, '')}
        </SyntaxHighlighter>
      </div>
    );
  },

  // 列表标签（无序列表）
  li: ({ children, ...props }) => {
    // 处理任务列表（带复选框）
    if (props.checked !== undefined) {
      return (
        <li style={{ listStyle: 'none', margin: '0.3rem 0', display: 'flex', alignItems: 'flex-start' }}>
          <input 
            type="checkbox" 
            checked={props.checked} 
            disabled 
            style={{ 
              marginRight: '0.5rem',
              marginTop: '0.3rem',
              transform: 'scale(1.1)'
            }}
          />
          <span style={{ textDecoration: props.checked ? 'line-through' : 'none', color: props.checked ? '#a0aec0' : '#2d3748' }}>
            {children}
          </span>
        </li>
      );
    }
    // 普通列表项
    return <li style={{ margin: '0.3rem 0' }} {...props}>{children}</li>;
  },

  // 列表容器
  ul: ({ children }) => (
    <ul style={{ 
      paddingLeft: '1.5rem', 
      margin: '0.8rem 0',
      listStyleType: 'disc'
    }}>
      {children}
    </ul>
  ),

  ol: ({ children }) => (
    <ol style={{ 
      paddingLeft: '1.5rem', 
      margin: '0.8rem 0',
      listStyleType: 'decimal'
    }}>
      {children}
    </ol>
  ),

  // 表格标签（需配合 remark-gfm 使用）
  table: ({ children }) => (
    <table style={{ 
      width: '100%', 
      borderCollapse: 'collapse', 
      margin: '1rem 0',
      border: '1px solid #e2e8f0',
      borderRadius: '6px',
      overflow: 'hidden'
    }}>
      {children}
    </table>
  ),
  td: ({ children, ...props }) => (
    <td 
      style={{ 
        padding: '0.75rem', 
        border: '1px solid #e2e8f0',
        textAlign: props.align || 'left',
        color: '#4a5568'
      }}
      {...props}
    >
      {children}
    </td>
  ),
  th: ({ children }) => (
    <th style={{ 
      padding: '0.75rem', 
      border: '1px solid #e2e8f0',
      backgroundColor: '#f7fafc',
      fontWeight: 600,
      color: '#2d3748'
    }}>
      {children}
    </th>
  ),

  // 强调标签（粗体、斜体）
  strong: ({ children }) => (
    <strong style={{ fontWeight: 700, color: '#1a202c' }}>{children}</strong>
  ),
  em: ({ children }) => (
    <em style={{ fontStyle: 'italic', color: '#4a5568' }}>{children}</em>
  ),

  // 引用块
  blockquote: ({ children }) => (
    <blockquote style={{ 
      margin: '1rem 0', 
      paddingLeft: '1.5rem', 
      borderLeft: '4px solid #cbd5e0',
      color: '#4a5568',
      backgroundColor: '#f7fafc',
      padding: '0.8rem 1.5rem',
      borderRadius: '0 4px 4px 0'
    }}>
      {children}
    </blockquote>
  ),

  // 图片标签
  img: ({ src, alt }) => (
    <img 
      src={src} 
      alt={alt || 'Markdown image'} 
      style={{ 
        maxWidth: '100%', 
        borderRadius: '4px',
        margin: '1rem 0',
        boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
        border: '1px solid #e2e8f0'
      }}
    />
  ),
};